<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<style>
		#canvas{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id='canvas' width="800" height="500">
		您的浏览器不支持canvas,请升级您的浏览器
	</canvas>
	<div id="test_div"></div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	// ctx.fillStyle = '#ccc';
	// ctx.fillRect(10,20,50,50);
	context.beginPath();
    context.fillStyle = '#ccc';
    context.rect(0, 0, 200, 200);
    // context.fill();
    // context.stroke();


    var $oDiv = $('#test_div');
    function giveHtml(){
    	var str = '';
    	for(var i = 0 ; i< 5;i++){
    		str +='<li id="'+i+'">num'+i+'</li>';
    	}
    	$oDiv.html(str);
    }
    giveHtml();
    $('li').on('click',function(){
    	alert($(this).index())
    })
    console.log($('li')[0])
</script>